<template>
<div>
    <vue-pickers
      :show="showPicker"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      :link="link"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
</div>
</template>

<script>
import API from '@/service/api'
import vuePickers from 'vue-pickers'
export default {
    components: { vuePickers },
    props: {
        showPicker: {
            type: Boolean,
            default(){ return false }
        },
        defaultData: {
            type: Array,
            default() { return  [{ text: '请选择', value: '-1' },{ text: '请选择', value: '-1' }] }
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            columns: 2,
            link: true, // 联动必须需要link 参数
            pickData: {
                // 第一列的数据结构
                data1: [{ text: '请选择', value: '-1' }],
                data2: {'-1':[{ text: '请选择', value: '-1' }]},
            }
        }
    },
    methods: {
        async initialization() {
            let clist = []
            if(this.type == 'min'){
                clist = await API.dic.getMinCateGoryList({})
            }else {
                clist = await API.dic.getBaseCateGoryList({})
            }
            clist.forEach(element => {
                let row = { text: element.label, value: element.value }
                this.pickData.data1 = [...this.pickData.data1, row]
                let childList = []   
                element.children.forEach(c => {
                    let childrow = { text: c.label, value: c.value }
                    childList = [childrow, ...childList]
                })
                let item = new Object()
                this.pickData.data2[element.value+''] = childList
            })
        },
        close() {
            this.$emit('update:showPicker',false)
        },
        //确认选中
        confirmFn(val) {
            this.close()
            this.$emit('changeValue',[ val.select1, val.select2 ])
        },
    },
    created() {
        this.initialization()
    }
}
</script>

<style>

</style>
